<template>
  <ElTabs v-model="query[prop]" @tab-change="onChange">
    <ElTabPane
      v-for="(item, index) in tabs"
      :key="index"
      :label="item.label"
      :name="item.value"
    ></ElTabPane>
  </ElTabs>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const props = defineProps<{
  query?: Object;
  prop?: string;
  api?: () => Promise<any[]>;
  setAsyncDefault?: (tabs: any) => any;
}>()

const emit = defineEmits()

const tabs = ref<any[]>([])
onMounted(() => {
  if (!props.api) return
  props.api()
    .then(res => {
      tabs.value = res || []
      if (props.setAsyncDefault) {
        const val = props.setAsyncDefault(tabs.value)
        props.query[props.prop] = val
        emit('tab-change')
      }
    })
})

const onChange = () => {
  emit('tab-change')
}
</script>
